<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      loading: false,
      total: 50,
      param: {
        pageNo: 1,
        pageSize: 1,
        name: "",
        address: "",
        telephone: "",
        email: "",
      },
      tableData: "",
      companyForm: {
        name: "",
        address: "",
        telephone: "",
        simplyIntroduce: "",
        courseIntroduce: "",
        email: "",
        code: "",
        img: "",
      },

      title: "添加公司信息",
      dialogFormVisible: false,
      // 图片上传
      dialogVisible: false,
      // baseURL: "http://localhost:8888/sfzy/file/load?fileName=",
      baseURL: "http://10.10.18.137:8888/sfzy/downLoad?filename=",

      // imgUrl:'http://localhost:8888/sfzy/file/upload',
      imgUrl: "http://10.10.18.137:8888/sfzy/upload",

      dialogImageUrl: "",
      fileList: [],
      dialogVisible2: false,
      fileList2: [],
      dialogImageUrl2: "",
      isHidden:false,
      isEdit:false
    };
  },
  methods: {

    //获取表格数据
    get() {
      this.loading = true;
      this.$http
        .get("/company/list", {
          params: this.param,
        })
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 200) {
            this.tableData = res.data.data.list[0];
            this.companyForm = this.tableData;

            // 加载图片
            if (this.companyForm.code != "") {
              this.fileList = [
                {
                  name: this.companyForm.code,
                  url: this.baseURL + this.companyForm.code,
                },
              ];
            }
            if (this.companyForm.img != "") {
              this.fileList2 = [
                {
                  name: this.companyForm.img,
                  url: this.baseURL + this.companyForm.img,
                },
              ];
            }

            this.loading = false;
          } else {
            Message({
              type: "error",
              message: "获取数据失败",
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },

    setEdit() {
      this.isEdit = true
    },
    edit() {
      this.$http
        .post("/company/update", this.companyForm)
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 200) {
            this.fileList=""
            this.fileList2=""

            this.get()
            this.isEdit = false
          } else {
            Message({
              message:'保存失败',
              type:'error'
            })
          }
        })
        .catch((e) => {})
    },
    cancel(){
      this.isEdit = false
      this.get()
    },
    uploadClass(){
      let c = {}
      if(this.isEdit){
        c = {
          display:none
        }
      }
      return c
    },

    // 上传图片
    handleSuccess(res) {
      console.log("图片上传:" + res.message);
      this.companyForm.code = res.message;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.companyForm.code = "";
    },
    handleSuccess2(res) {
      console.log("图片上传:" + res.message);
      this.companyForm.img = res.message;
    },
    handlePictureCardPreview2(file) {
      this.dialogImageUrl2 = file.url;
      this.dialogVisible2 = true;
    },
    handleRemove2(file, fileList) {
      console.log(file, fileList);
      this.companyForm.img = "";
    },
  },
  watch: {},
  mounted() {
    this.get();
  },
};
</script>
<template>
  <div>
    <!-- 搜索栏 -->
    <el-descriptions
      class="margin-top"
      title="公司信息"
      :column="3"
      size=""
      border
    >
      <template slot="extra">
        <el-button type="primary" @click="setEdit" v-if="!isEdit">修改</el-button>
        <el-button type="primary" @click="edit" v-if="isEdit">确定</el-button>
        <el-button type="primary" @click="cancel" v-if="isEdit">取消</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          公司名称
        </template>
        <span v-if="!isEdit">{{ tableData.name }}</span>
        <el-input v-model="companyForm.name" v-if="isEdit"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          联系电话
        </template>
        <span v-if="!isEdit">{{ tableData.telephone }}</span>
        <el-input v-model="companyForm.telephone" v-if="isEdit"/>

      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          地址
        </template>
        <span  v-if="!isEdit">{{ tableData.address }}</span>
        <el-input v-model="companyForm.address" v-if="isEdit"/>

      </el-descriptions-item>
      <el-descriptions-item :span="3">
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          邮箱
        </template>
        <span v-if="!isEdit">{{ tableData.email }}</span>
        <el-input v-model="companyForm.email" v-if="isEdit"/>

      </el-descriptions-item>

      <el-descriptions-item :span="3" :contentStyle="{ width: '100px' }">
        <template slot="label">
          <i class="el-icon-tickets"></i>
          简介
        </template>
        <span v-if="!isEdit">{{ tableData.simplyIntroduce }}</span>
        <el-input v-model="companyForm.simplyIntroduce" v-if="isEdit"/>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          公司照片
        </template>
        <el-upload
          :disabled="!isEdit"
          :action="imgUrl"
          list-type="picture-card"
          :file-list="fileList2"
          :on-success="handleSuccess2"
          :limit="1"
          :on-preview="handlePictureCardPreview2"
          :on-remove="handleRemove2"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible2">
          <img width="100%" :src="dialogImageUrl2" />
        </el-dialog>
      </el-descriptions-item>

      <el-descriptions-item :span="3" :contentStyle="{ width: '100px' }">
        <template slot="label">
          <i class="el-icon-tickets"></i>
          二维码
        </template>
        <el-upload
        :disabled="!isEdit"
          :class="uploadClass"
          :action="imgUrl"
          list-type="picture-card"
          :file-list="fileList"
          :on-success="handleSuccess"
          :limit="1"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" />
        </el-dialog>
      </el-descriptions-item>
    </el-descriptions>

  </div>
</template>
<style>
span {
  margin: 2px 10px;
}
.head {
  margin: 10px 5px;
}
.el-button {
  margin: 5px 20px;
}
/* .el-upload{
  display: none;
} */
</style>